<head>
  <script src="{{bundleJsPath}}"></script>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-teal.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/railscasts.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    body {
      font-family: "Roboto", "Helvetica", "Arial", sans-serif;
      margin: 0;
      width: 100%;
      height: 100%;
    }

    a {
      color: inherit;
    }

    table {
      text-align: left;
      font-family: "Roboto Mono", monospace;
    }

    thead {
      background-color: #dedede;
    }

    th {
      text-align: left;
      padding: 4px;
    }

    td {
      text-align: left;
      padding: 8px;
      padding-right: 16px;
    }

    .container {
      display: flex;
      flex-direction: column;
    }

    @media (max-width: 599px) {
      body .container {
        flex-direction: column;
      }

      body .container .content-area {
        flex-direction: column;
        height:auto;
        width:100vw;
      }

      body .container .content-area .toc {
        height:auto;
        width:100vw;
        max-width: 100vw;
        overflow-y: auto;
        overflow-x: auto;
      }

      body .container .content-area .reference {
        height:auto;
        width:100vw;
        overflow-y: auto;
        overflow-x: auto;
        margin-left: 0;
      }
     }

    .container nav {
      position: fixed;
      border-bottom: 1px solid lightgrey;
      padding: 10px;
      padding-left: 24px;

      width: 100%;
      height: 32px;
      background-color: rgb(96,125,139);
      z-index: 100;
    }

    .container nav a {
      display: inline-block;
      padding-top: 6px;
      color: white;
      font-size: 20px
    }

    .container nav .title {
      display: inline-block;
      text-align: center;
    }

    .container .content-area {
      display: flex;
      flex-direction: row;
      margin-top: 52px;
    }

    .container .content-area .toc {
      width: 25%;
      min-width: 250px;
      max-width: 350px;
      height: calc(100vh - 52px);
      overflow-y: auto;
      overflow-x: hidden;

    }

    .container .content-area .reference {
      flex-grow: 1;
      height: calc(100vh - 52px);
      overflow-y: auto;
      overflow-x: hidden;
      margin-left: 40px;
    }

    .section {
      padding: 16px;
      margin-left: 0px;
      margin-top: 16px;
      padding-bottom: 32px;
    }

    .section-title {
      margin-bottom: 0px;
    }

    .subsection {
      margin-top: 16px;
      margin-left: 16px;
    }

    .sub-section-title {
      margin-bottom: 8px;
      font-weight: 400;
    }

    .subsection-title::before, h5::before {
      display: block;
      content: "";
      height: 60px;
      margin: -60px 0 0;
    }


    /* TOC Pane */
    .toc .section:nth-of-type(2) {
      margin-top: 0;
      padding-top: 0;
    }

    .toc .symbol {
      padding: 0;
      margin-left: 8px;
      margin-bottom: 4px;
      border: none;
    }

    .toc a {
      font-weight: normal;
      text-decoration-color: lightgrey;
      text-decoration: none;
      transition-property: color, text-decoration-color, padding;
      transition-duration: 0.15s;
    }

    .toc a.highlighted {
      color: #0277BD;
      text-decoration-color: #002b36;
      padding-left: 6px;
      font-weight: bold;
    }

    /* Reference Pane */

    .reference .section {
      max-width: 720px;
    }

    .reference .subsection {
      margin-top: 40px;
      margin-left: 0;
    }

    .reference .subsection-title {
      font-weight: 300;
      margin-bottom: 16px;
    }

    .reference .subsection-description {
      font-weight: 300;
      margin-bottom: 80px;
      border-bottom: 1px solid rgb(96,125,139);
      margin-left: 8px;
      padding-bottom: 24px;
      font-size: 21px;
    }

    .reference .subsection-description p {
      font-size: inherit;
      font-weight: inherit;
    }

    .reference .symbol-marker {
      display: inline-block;
      margin-right: 12px;
      font-style: italic;
      font-size: 90%;
      color: grey;
    }

    .reference .symbol .symbol-name {
      text-decoration: none;
      color: #0277BD;
      margin-right: 0.33em;
    }

    .param-docs pre {
      background: #f4f4f4;
    }

    code.hljs {
      border-radius: 5px;
      padding-left: 16px;
    }

    pre.hljs {
      padding: 24px;
      padding-bottom: 32px;
      margin: 0;
      background: white;
    }

    code, .param-name, .return-type {
      background: #f7f7f7;
      background: #f4f4f4;
      color: #37474f;
      font-weight: 500;
      font-family: Roboto Mono, monospace;
      word-break: break-word;
    }

    .documentation a, .returns a,  .param-name a, .method-docs a, .param-docs a {
      color: #0277BD;
      font-weight: 500;
      font-family: Roboto Mono, monospace;
    }

    .reference .symbol {
      margin-left: 32px;
      margin-bottom: 96px;
      border-bottom: 1px solid #0277BD;
      padding-bottom: 16px;
    }

    .parameter {
      margin-bottom: 24px;
    }

    .parameter-heading, .returns-header {
      margin-top: 8px;
      font-weight: 500;
      text-transform: uppercase;
      font-size: 14px;
    }

    .method {
      margin: 16px 0px 24px 25px;

    }

    .param-name {
      margin: 12px 0;
    }

    .param-docs {
      padding: 4px 12px;
    }

    .method-docs {
      padding: 12px 0 0 16px;
    }

    .source-ref {
      margin-top: 24px;
      font-style: italic;
    }

    .source-ref a {
      color:#0277BD;
    }

    .chip {
      background: #f4f4f4;
      display: inline-block;
      padding: 0 6px 0 6px;
      border-radius: 4px;
      font-weight: 500;
      font-size: 82%;
    }

    .snippet-console {
      margin: -32px 24px 0 24px;
      min-height: 24px;
      position: relative;
    }

    .snippet-console-log {
      border-radius: 8px;
      background: #f4f4f4;
      padding: 8px 16px;
      min-height: 16px;
      white-space: pre-wrap;
      font-family: "Roboto Mono", monospace;
    }

    .snippet-run-button {
      position: absolute;
      right: 4px;
      top: 4px;
      font-size: 12px;
      font-weight: bold;
    }
  </style>

  <script>
    document.addEventListener('DOMContentLoaded', function(e) {
      var isInViewport = function(elem) {
        var bounding = elem.getBoundingClientRect();
        return (
          bounding.top >= 0 &&
          bounding.left >= 0 &&
          bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      };

      // Find the symbol closest to the top of the page in the reference
      // section and highlight it in the TOC section.

      var refSymbols = document.querySelectorAll('.symbol-name');
      var refArea = document.querySelector('.reference');
      var tocArea = document.querySelector('.toc');

      var lastHighlightedTocElement;

      function updateTocView() {
        var top = refArea && refArea.scrollTop

        var found;
        var tocFound;

        for (var i = 0; i < refSymbols.length; i++) {
          var symbol = refSymbols[i];
          var sTop = symbol.offsetTop;
          if (sTop > top) {
            found = symbol;
            break;
          }
        }

        if (found) {
          tocFound = tocArea.querySelectorAll(`[href="#${found.getAttribute('name')}"]`)

          // The first subheading in a section shares an href with its parent.
          tocFound = tocFound.length > 1 ? tocFound[1] : tocFound[0];

          if (lastHighlightedTocElement) {
            lastHighlightedTocElement.classList.remove('highlighted');
          }
          tocFound.classList.add('highlighted');
          if(!isInViewport(tocFound)) {
            tocFound.scrollIntoView(false);
          }
          lastHighlightedTocElement = tocFound;
        }
      }

      refArea.addEventListener('scroll', updateTocView)
      refArea.addEventListener('resize', updateTocView)
    });
  </script>
</head>

<body>
  <!-- Partials -->
  {{#*inline "paramList"}}
    {{#if parameters.length}}
    <div class="parameter-list">
      <div class="parameter-heading">Parameters:</div>
      <ul>
        {{#parameters}}
        <li class="parameter">
          <span class="param-name">
            {{name}}:&nbsp;{{{markdownInner type}}}
          </span>
          <span class="param-docs">
            {{{markdownInner documentation}}}
          </span>
           {{#optional}}
          <span class="chip">
            Optional
          </span>
          {{/optional}}
        </li>
        {{/parameters}}
      </ul>
    </div>
    {{/if}}
  {{/inline}}
  <!-- END Partials -->


  <div class="container">
    <nav>
      <a href="/index.html">deeplearn.js</a>
    </nav>

    <div class="content-area">
      <div class="toc">
        <div class="section">
          <div class='section-title mdl-typography--title'>API Reference </div>
          <div class="sub-section-title mdl-typography--subhead-color-contrast">(v 0.5)</div>
        </div>
        {{#headings}}
        <div class="section">
          <div class="section-title mdl-typography--title">
            <a href="#{{name}}-{{subheadings.0.name}}">{{name}}</a>
          </div>
          {{#subheadings}}
          <div class="subsection">
            <div class="sub-section-title mdl-typography--subhead">
              <a href="#{{../name}}-{{name}}">{{name}}</a>
            </div>
            {{#symbols}}
            <div class="symbol">
              <a href="#{{urlHash}}">{{displayName}}</a>
            </div>
            {{/symbols}}
          </div>
          {{/subheadings}}
        </div>
        {{/headings}}
      </div>

      <div class="reference">
        {{#headings}}
        <div class="section">
          {{#subheadings}}
          <div class="subsection">
            <div id="{{../name}}-{{name}}" name="{{../name}}-{{name}}" class="symbol-name subsection-title mdl-typography--display-3">{{../name}} &nbsp;/&nbsp; {{name}}</div>
            <div class="subsection-description mdl-typography--headline">{{{description}}}</div>
            {{#symbols}}
            <div class="symbol">
              <h5 id="{{urlHash}}">
                {{#if isClass}}
                  <span class="chip">Class</span>
                {{else}}
                  <span class="symbol-marker">&fnof;</span>
                {{/if}}
                <a class="symbol-name" name="{{urlHash}}" href="#{{urlHash}}">{{displayName}}</a>{{paramStr}}
              </h5>

              <div class="documentation">{{{markdown documentation}}}</div>

              {{#isFunction}}

              <!-- Params -->
              {{> paramList }}

              <div class="returns">
                <span class="returns-header">
                   Returns:
                </span>
                <span class="return-type">{{{markdownInner returnType}}}</span>
              </div>
              {{/isFunction}} {{#isClass}}
              <h6>Methods:</h6>
              {{#methods}}
              <div class="method">
                <span class="method-name">
                  <code>{{symbolName}}{{paramStr}}</code>
                </span>
                <span class="method-docs">
                  {{#optional}}(Optional){{/optional}} {{{markdownInner documentation}}}

                  <!-- Params -->
                  {{> paramList }}
                </span>
              </div>
              {{/methods}} {{/isClass}}

              <div class="source-ref">
                Defined in <a href="{{githubUrl}}" target=_blank>{{fileName}}</a>
              </div>
            </div>
            {{/symbols}}
          </div>
          {{/subheadings}}
        </div>
        {{/headings}}
      </div>
    </div>
  </div>
  <script>
    async function executeCodeSnippet(consoleLogElement, codeSnippet) {
      consoleLogElement.innerText = '';

      var oldLog = console.log;
      console.log = function(logStr) {
        consoleLogElement.innerText += logStr + '\n';
      };

      var snippet = 'dl.tidy(function() {' + codeSnippet + '});';
      eval(snippet);
      console.log = oldLog;
    };

    (function() {
      // Find all the code blocks.
      var jsBlocks = document.querySelectorAll('.language-js');
      for (var i = 0; i < jsBlocks.length; i++) {
        var block = jsBlocks[i];

        var consoleElement = document.createElement('div');
        consoleElement.className = 'snippet-console';

        var consoleRunElement = document.createElement('button');
        consoleRunElement.innerText = 'Run';
        consoleRunElement.className = 'snippet-run-button';

        var consoleLogElement = document.createElement('div');
        consoleLogElement.className = 'snippet-console-log';

        consoleElement.appendChild(consoleLogElement);
        consoleElement.appendChild(consoleRunElement);
        block.parentElement.insertAdjacentElement('afterend', consoleElement);

        consoleRunElement.addEventListener('click', function() {
          var consoleLogElement =
              this.parentElement.querySelector('.snippet-console-log');
          var snippetText = this.parentElement.previousElementSibling.innerText;
          executeCodeSnippet(consoleLogElement, snippetText);
        });
      }
    })();
  </script>
  <script>
    (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-46457317-8', 'auto');
    ga('send', 'pageview');
  </script>

</body>
